<!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
      <link type="text/css" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
      <link type="text/css" rel="stylesheet" href="css/style.css" />

      <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>

      <script type="text/javascript">
          function renderMap() {
              var directionsService = new google.maps.DirectionsService();
               var directionsDisplay = new google.maps.DirectionsRenderer();

               var map = new google.maps.Map(document.getElementById('map'), {
                 zoom:7,
                 mapTypeId: google.maps.MapTypeId.ROADMAP
               });

               directionsDisplay.setMap(map);
               //directionsDisplay.setPanel(document.getElementById('panel'));

               var request = {
                 origin: '649/115 Dien Bien Phu, Ho Chi Minh', 
                 destination: 'Cho Van Thanh',
                 travelMode: google.maps.DirectionsTravelMode.DRIVING
               };

               directionsService.route(request, function(response, status) {
                 if (status == google.maps.DirectionsStatus.OK) {
                   directionsDisplay.setDirections(response);
                 }
               });
          }
      </script> 
      <script>

      $(document).ready(function(){

        
        $('.btn-left-menu').sideNav({
            menuWidth: 240, // Default is 240
            edge: 'left', // Choose the horizontal origin
            closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
          }
        );
        $('select').material_select();
        $('.modal-trigger').leanModal({
          ready: function() { 
              //alert("ready");
              renderMap();
          }
        });
      });
      </script>
    </head>

    <body>
      <header>
      <ul id="slide-out" class="side-nav fixed">
        <li class="avatar">
          <div class="av-img" style="background-image: url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTmzHD1yQR-cxyJsQGVk7-TEZc60fkTq2DuI6o16yM1ZRZwkR1P');">
          </div>    
        </li>
        <li class="no-padding">
          <ul class="collapsible collapsible-accordion">
            <li class="bold">
              <a class="collapsible-header active waves-effect waves-red">
                <i class="mdi-action-account-circle"></i>
                Tài khoản</a>
              <div class="collapsible-body" style="">
                <ul>
                  <li><a>Cá nhân</a></li>
                  <li><a>Bạn bè</a></li>
                </ul>
              </div>
            </li>
            <li class="bold">
              <a class="collapsible-header waves-effect waves-teal">
                <i class="mdi-action-assignment"></i>  
                Công việc</a>
              <div class="collapsible-body" style="">
                <ul>
                  <li><a>Việc đã đăng</a></li>
                  <li><a>Việc đã làm</a></li>
                </ul>
              </div>
            </li>
            <li class="bold">
              <a class="collapsible-header  waves-effect waves-teal">
                <i class="mdi-editor-attach-money"></i>
                Giao dịch</a>
              <div class="collapsible-body" style="">
                <ul>
                  <li><a>Tài khoản ngân hàng</a></li>
                  <li><a>Tài khoản shipper</a></li>
                </ul>
              </div>
            </li>
          </ul>
        </li>
      </ul>
      </header>
      <main>
        
        <div class="navbar-fixed">
          <nav>
            <div class="nav-wrapper">
               <!--<a href="#" data-activates="slide-out" class=" button-collapse hide-on-large-only btn-menu-left">
                <i class="small mdi-navigation-menu"></i></a>-->
              
                  <ul class="" style="margin:auto">
                    <li>
                      <a href="#" data-activates="slide-out" class="button-collapse btn-left-menu">
                      <i class="small mdi-navigation-menu"></i></a>
                    </li>

                    <li>
                      <a href="#" class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="Trang chủ"><i class="mdi-action-home"></i></a>
                    </li>
                    <li>
                      <a href="#" class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="Thông báo"><i class="mdi-social-public"></i>12</a>
                    </li>
                    <li>
                      <a href="#" class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="Tin nhắn"><i class="mdi-maps-local-post-office"></i>13</a>
                    </li>
                    <li><a href="#" class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="Đăng xuất"><i class="mdi-action-exit-to-app"></i></a></li>
                  </ul>
                  
            </div>
          </nav>
        </div>
        

        <div class="row">
          <div class="input-field col s12 l6">
            <i class="mdi-action-search prefix"></i>
            <input id="icon_prefix" type="text" class="validate">
            <label for="icon_prefix">Từ khóa</label>
          </div>
          <div class="col s6 l3">
            <select>
              <option value="" disabled selected>Choose your option</option>
              <option value="1">Option 1</option>
              <option value="2">Option 2</option>
              <option value="3">Option 3</option>
            </select>
          </div>
          <div class="col s6 l3">
            <select>
              <option value="" disabled selected>Choose your option</option>
              <option value="1">Option 1</option>
              <option value="2">Option 2</option>
              <option value="3">Option 3</option>
            </select>
          </div>
        </div>
        <div class="row">
          <div class="col s12">
            <div class="card-panel white">
              <div class="valign-wrapper">
                <h5 class="card-title left left-align" style="width:50%">Giao hàng quận 2 đi bình tân</h5>
                <h6 class="card-title right right-align grey-text" style="width:50%">27/03/2015</h6>
              </div>
              <p class="">
                <span>User ABC</span> | <span>Hàng hóa</span> | <span>TP Hồ Chí Minh</span>
              </p>
              <p class="">
                Giao hàng nhanh, lấy tiền liền, không đặt cọc
              </p>
              <p class="tools">
                <a class="btn-floating btn-medium waves-effect waves-light red modal-trigger" href="#modalMap">
                  <i class="fa fa-map-marker"></i></a>
                <a class="btn-floating btn-medium waves-effect waves-light red">
                  <i class="fa fa-clock-o"></i></a>
                <a class="btn-floating btn-medium waves-effect waves-light red">
                  <i class="fa fa-list"></i></a>
              </p>
            </div>
          </div>

          

        </div>
        <!--map model-->
        <div id="modalMap" class="modal">
          <div class="modal-content">
            <h4>Modal Header</h4>
            <div style="width: 600px;">
               <div id="map" style="width: 600px; height: 300px;"></div> 
             </div>
          </div>
          <div class="modal-footer">
            <a href="#" class="waves-effect waves-green btn-flat modal-action modal-close">Agree</a>
          </div>
        </div>

        <!--/map model-->
      </main>
      <div style="bottom: 15px; right: 15px;" class="fixed-action-btn">
          <a class="btn-floating btn-large red">
            <i class="large mdi-editor-mode-edit"></i>
          </a>
          <ul>
            <li><a class="btn-floating red" style="transform: scaleY(0.4) scaleX(0.4) translateY(40px); opacity: 0;"><i class="large mdi-editor-insert-chart"></i></a></li>
            <li><a class="btn-floating yellow darken-1" style="transform: scaleY(0.4) scaleX(0.4) translateY(40px); opacity: 0;"><i class="large mdi-editor-format-quote"></i></a></li>
            <li><a class="btn-floating green" style="transform: scaleY(0.4) scaleX(0.4) translateY(40px); opacity: 0;"><i class="large mdi-editor-publish"></i></a></li>
            <li><a class="btn-floating blue" style="transform: scaleY(0.4) scaleX(0.4) translateY(40px); opacity: 0;"><i class="large mdi-editor-attach-file"></i></a></li>
          </ul>
      </div>
    </body>
  </html>